<template>
	<view class="content">
		<up-search placeholder="搜索经典" bg-color="#e3e3e3" v-model="keyword"></up-search> //搜索框
		<up-swiper :list="bannerList" radius="8" keyName="image" :autoplay="true" showTitle height="160"></up-swiper> //轮播图
		<up-notice-bar text="项目数据仅为示例,非真实数据"></up-notice-bar> //滚动通知
		<view class="list">
			//瀑布流数据 懒加载  v-slot 插槽
			<up-waterfall v-model="flowList">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item,index) in leftList" :key="index">
						<up-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></up-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-price">
							{{item.times}}
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								{{item.tag[0]}}
							</view>
							<view class="demo-tag-text">
								{{item.tag[1]}}
							</view>
						</view>
						<view class="isDot" v-if="item.isDot">
							{{item.isDot}}
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
				</template>
			</up-waterfall>
		</view>
		<view class="topClass" v-if="showTopBth" @click="Totop">
			<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
		</view>
	</view>
</template>

<script setup>
  import {getBanner,getHomeList} from '../../api/api.js'
  // onReachBottom 页面触底就会触发 懒加载使用
  import {onLoad,onReachBottom ,onPageScroll} from '@dcloudio/uni-app'
  import {
	  ref,reactive
	  } from 'vue' //响应变量 vue 3
   const keyword= ref('')
   const bannerList =ref([]) //轮播图
   const flowList =ref([]) //瀑布流数据
   const showTopBth =ref(0) //滚动是否显示
  
  //生命周期函数
  onLoad(()=>{
	  getBanner().then(res=>{
		  console.log(res,'res')
		  bannerList.value =res.bannerList
	  })
	  getHomeList().then(res=>{
		  console.log(res,'getHomeList')
		  flowList.value =res
	  })
  })
  
  //触底 函数
  onReachBottom(()=>{
	  console.log('触底')
	  // 模拟触底后 数据的加载
	  setTimeout(()=>{
		addRandomData()
	  },1000)
  })
  
  //滚动条
  onPageScroll((e)=>{
	  e.scrollTop
	  if(e.scrollTop>600){
		  showTopBth.value =1
	  }else{
		  showTopBth.value=0
	  }
  })
  
  const Totop = () =>{
	  uni.pageScrollTo({
	  	scrollTop:0,
		duration: 300
	  })
  }
  
  //模拟后端返回的数据
  const addRandomData = () =>{
	  for(let i=0;i<10;i++){
		  let index =uni.$u.random(0,flowList.value.length-1)
		  let item=JSON.parse(JSON.stringify(flowList.value[index])) //转json
		  item.id =uni.$u.guid()
		  flowList.value.push(item)
	  }
  }
</script>

<style>
	.content {
	 padding: 20rpx 20rpx;
	}

	.list{
		margin: 30rpx 0;
		.demo-warter{
			margin: 10rpx 10rpx 10rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx;
			position: relative; //子绝父相
		}
		.demo-title{
			font-size: 30rpx;
			margin-top:10rpx ;
			color: #303133;
		}
		.demo-price{
			font-size: 24rpx;
			color: #777;
			margin-top: 10rpx;
		}
		
		.demo-tag{
			display: flex;
			margin: 10rpx;
			.demo-tag-owner{
				border:1px solid rgb(252,163,129);
				color: #ffaa00;
				font-size: 20rpx;
				display: flex;
				/* 中轴剧中 */
				align-items: center; 
				padding: 4rpx 14rpx;
				border-radius: 50rpx;
			}
			.demo-tag-text {
				border: 1px solid #00aaff;
				color: #00aaff;
				margin-left: 20rpx; 
				padding: 4rpx 14rpx;
				font-size: 20rpx;
				align-items: center; 
			}
		}
		.isDot{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 32rpx;
			background-color: #ff0000;
			text-align: center;
			border-radius: 10rpx;
			padding: 4rpx 10rpx;
		}
	}
	.topClass{
		position: fixed;
		bottom: 120rpx;
		right: 30rpx;
		background-color: rgba(0,0,0,0.5);
		padding: 20rpx;
		width: 44rpx;
		height: 44rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center; //主轴
		align-items: center
	}
	

</style>
